
<template>
  <el-dialog id="preview-data-dialog" v-dialogDrag :visible.sync="currentDialogVisible" :top="common.getDialogTop()" title="语句预览" class="preview-data-dialog" width="1250px" append-to-body @opened="dialogOpened">
    <div class="modal-body"></div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="currentDialogVisible = false">关闭</el-button>
    </span>
  </el-dialog>
</template>

<script>
import $ from "jquery";

export default {
  props: {
    designer: {
      type: Object,
      default: () => {
        return {};
      }
    },
    datasource: {
      type: Object,
      default: () => {
        return {};
      }
    },
    dataset: {
      type: Object,
      default: () => {
        return {};
      }
    },
    visible: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      formData: {
        fileName: null,
        prefix: null
      },
      fileList: []
    };
  },
  computed: {
    // 显示窗口
    currentDialogVisible: {
      get: function () {
        return this.visible;
      },
      set: function (val) {
        this.$emit("update:visible", val);
      }
    },
    // headers
    headers: {
      get: function () {
        const userInfo = this.common.getUserInfo();
        return {
          accessToken: userInfo.accessToken
        };
      }
    }
  },
  mounted () {},
  methods: {
    // 打开时
    dialogOpened () {
      this.getSqlData();
    },
    getSqlData () {
      const sql = this.dataset.sql;
      const type = this.datasource.type;
      const params = {
        sql,
        type,
        parameters: JSON.stringify(this.dataset.parameters)
      };
      if (type === "jdbc") {
        params.username = this.datasource.username;
        params.password = this.datasource.password;
        params.driver = this.datasource.driver;
        params.url = this.datasource.url;
      } else if (type === "buildin") {
        params.name = this.datasource.name;
      }
      const url = "/datasource/previewData";
      this.designer.ajax(url, params, res => {
        if (res.code === 200) {
          this.showData(res.data);
        }
      });
    },
    showData (result) {
      this.body = $("#preview-data-dialog").find(".modal-body");
      this.body.empty();
      const data = result.data;
      this.body.append(`<div style="height: 30px;background: #fdfdfd;">
        <span style="margin: 4px;">共${result.total}条数据，当前预览前${result.currentTotal}条</span>
        </div>`);
      const div = $(`<div style="overflow-x: auto"></div>`);
      this.body.append(div);
      const table = $('<table class="table table-bordered" style="margin-top: 2px;table-layout: fixed"></table>');
      div.append(table);
      const fields = result.fields;
      const header = $(`<tr style="background: #f3f3f3"></tr>`);
      for (const field of fields) {
        header.append(`<td style="word-wrap:break-word;width: 120px">${field}</td>`);
      }
      const theader = $(`<thead></thead>`);
      theader.append(header);
      table.append(theader);
      const body = $(`<tbody></tbody>`);
      table.append(body);
      for (const item of data) {
        const row = $(`<tr></tr>`);
        for (const field of fields) {
          row.append(`<td style="word-wrap:break-word">${item[field]}</td>`);
        }
        body.append(row);
      }
    }
  }
};
</script>

<style lang="scss">
.preview-data-dialog {
  .modal-body {
    max-height: 600px;
    overflow-y: auto;
  }
  table {
    border-collapse: collapse;
    margin: 0 auto;
    text-align: center;
  }

  table td,
  table th {
    border: 1px solid #cad9ea;
    color: #666;
    height: 30px;
  }

  table thead th {
    background-color: #cce8eb;
    width: 100px;
  }

  table tr:nth-child(odd) {
    background: #fff;
  }

  table tr:nth-child(even) {
    background: #f5fafa;
  }
}
</style>
